<script setup lang="ts">
import type { BasicOption } from '@/lib/typings';

import type { AppTypeProps } from '@/types';

import { reactive, ref } from 'vue';

import { Icon } from '@/components/core/icon';

import {
  ElColorPicker,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElMessageBox,
  ElRadio,
  ElRadioGroup,
  ElSwitch,
  type FormRules,
} from 'element-plus';
import { nanoid } from 'nanoid';

defineOptions({
  name: 'AppEdit',
});
const emits = defineEmits(['confirm']);
const visible = ref(false);
const app = ref<BasicOption>();
const form = ref<AppTypeProps>({
  type: 'custom',
  component: 'SystemApp',
  disableResize: false,
  hideInDesktop: false,
  height: 768,
  icon: 'fluent-color:apps-32',
  iconBgImage: '#fff',
  iconColor: '#3499d2',
  iconType: 'icon',
  keepInDock: true,
  key: `system_${app.value?.value || nanoid(10)}`,
  menu: [
    {
      key: 'window',
      sub: [
        {
          key: 'min',
          title: '最小化',
        },
        {
          key: 'max',
          title: '最大化',
        },
      ],
      title: '窗口',
    },
  ],
  multiTask: false,
  title: `${app.value?.label || 'App应用'}`,
  width: 1280,
  outLink: false,
  url: '',
});
const rules = reactive<FormRules>({
  key: [{ required: true, message: '请输入应用标识', trigger: 'blur' }],
  title: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
  url: [{ required: true, message: '请输入应用外链', trigger: 'blur' }],
  icon: [{ required: true, message: '请输入图标名称', trigger: 'blur' }],
  width: [
    { required: true, message: '请输入窗口宽度', trigger: 'blur' },
    { min: 200, max: 2048, message: '请输入200 - 2048', trigger: 'blur' },
  ],
  height: [
    { required: true, message: '请输入窗口高度', trigger: 'blur' },
    { min: 200, max: 2048, message: '请输入200 - 2048', trigger: 'blur' },
  ],
});
const onConfirm = () => {
  ElMessageBox.confirm('确定保存当前应用吗？', '提示', {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
  })
    .then(() => {
      emits('confirm', form.value);
      visible.value = false;
    })
    .catch(() => {});
};

const show = (data: AppTypeProps) => {
  app.value = { label: data.title as string, value: data.key as string };
  Object.assign(form.value, data);
  visible.value = true;
};
const open = (data: BasicOption) => {
  app.value = data;
  Object.assign(form.value, {
    type: 'custom',
    title: data.label || 'App应用',
    key: `system_${data.value || nanoid(10)}`,
  });
  visible.value = true;
};
defineExpose({
  open,
  show,
});
</script>
<template>
  <ElDialog
    v-model="visible"
    :align-center="true"
    :center="true"
    :close-on-click-modal="false"
    :draggable="true"
    modal-class="wos-folder-common-dialog"
    width="640"
  >
    <template #header>
      <div class="dialog-header">应用参数</div>
    </template>
    <div class="p-4 overflow-auto dialog-body">
      <ElForm :model="form" :rules="rules" label-width="auto">
        <ElFormItem label="应用类型" prop="outLink">
          <ElRadioGroup v-model="form.outLink" size="small">
            <ElRadio :value="false">应用</ElRadio>
            <ElRadio :value="true">外链</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem label="应用标识" prop="key">
          <ElInput
            v-model="form.key"
            placeholder="请输入应用标识"
            size="small"
          />
        </ElFormItem>
        <ElFormItem label="应用名称" prop="title">
          <ElInput
            v-model="form.title"
            placeholder="请输入应用名称"
            size="small"
          />
        </ElFormItem>
        <ElFormItem v-if="form.outLink" label="应用链接" prop="url">
          <ElInput
            v-model="form.url"
            placeholder="请输入应用链接"
            size="small"
          />
        </ElFormItem>

        <ElFormItem v-if="!form.outLink" label="窗口宽度" prop="width">
          <ElInputNumber
            v-model="form.width"
            :max="2048"
            :min="200"
            :precision="0"
            placeholder="请输入窗口宽度"
            size="small"
          />
        </ElFormItem>

        <ElFormItem v-if="!form.outLink" label="窗口高度" prop="height">
          <ElInputNumber
            v-model="form.height"
            :max="2048"
            :min="200"
            :precision="0"
            placeholder="请输入窗口高度"
            size="small"
          />
        </ElFormItem>

        <ElFormItem label="图标类型" prop="iconType">
          <ElRadioGroup v-model="form.iconType" size="small">
            <ElRadio value="icon">icon</ElRadio>
            <ElRadio value="iconfont">iconfont</ElRadio>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem v-if="form.iconType === 'icon'" label="图标预览">
          <div
            :style="{
              backgroundColor: form.iconBgImage,
              color: form.iconColor,
            }"
            class="flex items-center justify-center w-12 h-12 mt-2 rounded-md"
          >
            <Icon :icon="form.icon" class="size-8" />
          </div>
        </ElFormItem>
        <ElFormItem v-else label="图标预览">
          <div
            :style="{
              backgroundColor: form.iconBgColor,
              color: form.iconColor,
            }"
            class="flex items-center justify-center w-12 h-12 mt-2 rounded-md"
          >
            <Icon :icon="form.icon" class="size-8" />
          </div>
        </ElFormItem>

        <ElFormItem label="图标" prop="iconColor">
          <ElInput v-model="form.icon" placeholder="请选择图标" size="small">
            <template #append>
              <a href="https://icon-sets.iconify.design/" target="_blank">
                查看图标
              </a>
            </template>
          </ElInput>
        </ElFormItem>

        <ElFormItem label="图标颜色" prop="iconColor">
          <ElColorPicker
            v-model="form.iconColor"
            placeholder="请选择图标颜色"
            size="small"
          />
        </ElFormItem>

        <ElFormItem
          v-if="form.iconType === 'icon'"
          label="图标背景色"
          prop="iconBgImage"
        >
          <ElColorPicker
            v-model="form.iconBgImage"
            placeholder="请选择图标背景色"
            size="small"
          />
        </ElFormItem>

        <ElFormItem v-else label="图标背景色" prop="iconBgColor">
          <ElColorPicker
            v-model="form.iconBgColor"
            placeholder="请选择图标背景色"
            size="small"
          />
        </ElFormItem>

        <ElFormItem label="是否隐藏桌面图标" prop="hideInDesktop">
          <ElSwitch v-model="form.hideInDesktop" size="small" />
        </ElFormItem>
        <ElFormItem
          v-if="!form.outLink"
          label="是否禁止调整窗口大小"
          prop="disableResize"
        >
          <ElSwitch v-model="form.disableResize" size="small" />
        </ElFormItem>
        <ElFormItem label="是否常驻任务栏" prop="keepInDock">
          <ElSwitch v-model="form.keepInDock" size="small" />
        </ElFormItem>
        <ElFormItem
          v-if="!form.outLink"
          label="是否允许应用多开"
          prop="multiTask"
        >
          <ElSwitch v-model="form.multiTask" size="small" />
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <div class="flex items-center justify-end dialog-footer">
        <ElButton size="small" @click="visible = false"> 关闭 </ElButton>
        <ElButton size="small" type="primary" @click="onConfirm">
          确定
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>

<style lang="scss">
@import url('./index.scss');
</style>
